<template>
    <div class="photographer-orders">
      <h2 class="order-title">我的订单</h2>
      <el-table :data="orders" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="100" />
        <el-table-column prop="userName" label="用户" />
        <el-table-column prop="packageName" label="套餐" />
        <el-table-column prop="shootingTime" label="拍摄时间" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="startChat(row.id)">联系用户</el-button>
            <el-button 
              v-if="row.status === 'IN_PROGRESS'" 
              type="success" 
              size="small"
              style="margin-left: 8px;"
              @click="completeOrder(row.id)"
              :loading="row.completing"
            >
              完成订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import api from '../utils/api'
  import { useUserStore } from '../stores/user'
  
  const router = useRouter()
  const userStore = useUserStore()
  const orders = ref<any[]>([])
  const loading = ref(false)
  
  const getStatusType = (status: string) => {
    const statusMap = {
      'PENDING': 'warning',
      'CONFIRMED': 'primary',
      'IN_PROGRESS': 'success',
      'COMPLETED': 'success',
      'CANCELED': 'info',
      'FAILED': 'danger'
    }
    return statusMap[status as keyof typeof statusMap] || 'info'
  }
  
  const getStatusText = (status: string) => {
    const statusMap = {
      'PENDING': '待支付',
      'CONFIRMED': '已确认',
      'IN_PROGRESS': '拍摄中',
      'COMPLETED': '已完成',
      'CANCELED': '已取消',
      'FAILED': '已失败'
    }
    return statusMap[status as keyof typeof statusMap] || '未知状态'
  }
  
  const fetchPhotographerOrders = async () => {
    try {
      loading.value = true
      // 获取当前用户的摄影师信息
      if (!userStore.user?.id) {
        ElMessage.error('请先登录')
        return
      }
      const photographerRes = await api.get(`/photo/photographer/byUser/${userStore.user.id}`)
      const photographer = photographerRes.data
      const ordersRes = await api.get(`/photo/photographer/orders/${photographer.id}`)
      orders.value = ordersRes.data || []
    } catch (error) {
      console.error('获取订单失败:', error)
      ElMessage.error('获取订单失败')
    } finally {
      loading.value = false
    }
  }
  
  const startChat = (orderId: number) => {
    router.push(`/chat/${orderId}`)
  }
  
  const completeOrder = async (orderId: number) => {
    try {
      await ElMessageBox.confirm('确定要完成这个订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      
      // 设置loading状态
      const order = orders.value.find(o => o.id === orderId)
      if (order) {
        order.completing = true
      }
      
      await api.put(`/orders/${orderId}/complete`, {})
      ElMessage.success('订单已完成')
      fetchPhotographerOrders() // 刷新订单列表
    } catch (error) {
      if (error !== 'cancel') {
        console.error('完成订单失败:', error)
        ElMessage.error('完成订单失败，请重试')
      }
    } finally {
      // 清除loading状态
      const order = orders.value.find(o => o.id === orderId)
      if (order) {
        order.completing = false
      }
    }
  }
  
  onMounted(() => {
    console.log('PhotographerOrders.vue mounted')
    fetchPhotographerOrders()
  })
  </script>
  
  <style scoped>
  .photographer-orders {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .order-title {
    font-size: 2rem;
    font-weight: bold;
    color: #409EFF;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }
  </style>